<template>
  <div class="content-wrap">
    <div class="business-info-mod">
      <el-form @submit.native.prevent  ref="companyInfo" label-width="140px" :model="companyInfoForm" :rules="companyInfoRules" size="small">
        <div class="ci-wrapper">
          <div class="left-info">
            <!-- 营业期限 -->
            <el-form-item :label="$t('shopProcess.businessPeriod')" prop="startTime">
                <div style="display: flex">
                  <el-date-picker
                    v-model="companyInfoForm.startTime"
                    style="width:162px;"
                    type="date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :placeholder="this.$i18n.t('shopProcess.startTime')"
                    :clearable="false"
                  />
                  <span style="margin: 0 10px">-</span>
                  <span class="end-time">
                    <el-date-picker
                      ref="endTime"
                      v-model="companyInfoForm.endTime"
                      style="width:162px;"
                      type="date"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :placeholder="endTimeFlag && !companyInfoForm.endTime ? '' : this.$i18n.t('shopProcess.endTime')"
                      clearable
                      @change="endTimeFlag = false"
                      @focus="endTimeFlag = false"
                    />
                    <span v-if="endTimeFlag && !companyInfoForm.endTime" class="text" @click="focusEndTime">
                      {{ this.$i18n.t('shopProcess.noFixedTerm') }}
                    </span>
                  </span>
                </div>
            </el-form-item>

            <!-- 营业执照电子版 -->
            <el-form-item :label="this.$i18n.t('shopProcess.businessLicense')" prop="businessLicense">
              <div class="business-license-box">
                <div class="license-content">
                  <img-upload v-model="companyInfoForm.businessLicense" @input="imgChange(companyInfoForm.businessLicense, 'businessLicense')"/>

                  <!-- <DirectImgUpload
                  :modelValue.sync="shopBasicInfo.shopLogo"
                  :limit="1"
                  :prompt="false"
                  @input="imgChange(companyInfoForm.businessLicense, 'businessLicense')"
                /> -->


                  <div class="example-box">
                    <img src="~@/assets/img/example-img/Business-license.png">
                    <div class="tips">{{ $t('shopProcess.example') }}</div>
                  </div>
                </div>
                <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
              </div>
            </el-form-item>

            <!-- 身份证图片 -->
            <div class="id-box">
              <div class="upload-content">
                <div class="upload-img">
                  <el-form-item class="idcard" :label="this.$i18n.t('shopProcess.idPhoto')" prop="identityCardFront">
                    <img-upload
                      v-model="companyInfoForm.identityCardFront"
                      @input="imgChange(companyInfoForm.identityCardFront, 'identityCardFront')"
                    />
                  </el-form-item>
                  <el-form-item class="idcard" label-width="0" prop="identityCardLater">
                    <img-upload
                      v-model="companyInfoForm.identityCardLater"
                      @input="imgChange(companyInfoForm.identityCardLater, 'identityCardLater')"
                    />
                  </el-form-item>
                </div>
                <div :class="lang === 'en' ? 'en-left' : 'zh-left'">
                  <div class="upload-example">
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/idcard1.png">
                      <div class="tips">{{ $t('shopProcess.identityCardFront') }}</div>
                    </div>
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/idcard2.png">
                      <div class="tips">{{ $t('shopProcess.identityCardLater') }}</div>
                    </div>
                  </div>
                  <div class="upload-tips">{{ $t('shopProcess.identityCardTips') }}</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </el-form>
    </div>
    <!-- 工商信息 -->
    <!-- 操作 -->
    <div class="foot-btn">
      <el-button type="infor" size="small" @click="preStep">{{$t('shopProcess.previousStep')}}</el-button>
      <!-- <el-button type="primary" size="small" @click="nextStep">{{$t('shopProcess.submitAndNextStep')}}</el-button> -->
      <el-button type="primary" size="small" @click="nextStep">{{$t('brand.confirm')}}</el-button>
    </div>
  </div>
</template>

<script>
import ImgUpload from '@/components/img-upload'

export default {
  components: {
    ImgUpload
  },
  data () {
    return {
      lang: window.localStorage.getItem('o2oLang'),
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
       // 店铺工商信息
      companyInfoForm: {
        startTime: '',
        endTime: ''
      },
      endTimeFlag: false,
      companyInfoRules: {
        startTime: [
          { required: true, message: this.$i18n.t('formData.startTimeCannotBeEmpty'), trigger: 'change' }
        ],
        businessLicense: [
          { required: true, message: this.$t('shopProcess.businessLicenseNotEmpty'), trigger: 'change' }
        ],
        // identityCardFront: [
        //   { required: true, message: this.$t('shopProcess.idPhoto1'), trigger: 'change' }
        // ],
        // identityCardLater: [
        //   { required: true, message: this.$t('shopProcess.idPhoto2'), trigger: 'change' }
        // ]
      }
    }
  },

  mounted () {
  },

  methods: {
    /**
     * 图片的值发生改变，重新校验对应表单字段
     */
    imgChange (value, prop) {
      if (value) {
        this.$refs.companyInfo.validateField(prop)
      }
    },
    /**
     * 营业时间赋值
     */
    handleTimeData (value) {
      this.companyInfoForm.startTime = value[0]
      this.companyInfoForm.endTime = value[1]
    },
     // 上一步
    preStep () {
      this.$emit('preStep')
    },
    /**
     * 不合规表单数据 拦截
     */
    formVoidInterdiction () {
      let fn = new Promise((resolve, reject) => {
        this.$refs['companyInfo'].validate(async (valid) => {
          valid ? resolve() : reject()
        })
      })
      return fn
    },
    focusEndTime () {
      this.$refs.endTime.focus()
    },
    // 下一步,提交
    nextStep () {
      this.$refs['companyInfo'].validate((valid) => {
        if (!valid) return
        // console.log('工商信息', this.companyInfoForm)
        this.$emit('nextStep', this.companyInfoForm)
      })
    }
  }
}
</script>

<style scoped lang="scss">
  // 查看图片
  .rotating-img {
    display: block;
    width: 60px;
    height: 60px;
    margin-right: 5px;
  }

 // 工商信息
 .business-info-mod {
    margin-top: 30px;
    & >>> .el-form {
      display: block;
      width: 100%;
      padding: 0 10px;
      .el-form-item {
        margin-bottom: 30px;
      }
    }
    .ci-wrapper {
      display: flex;
      justify-content: flex-start;
      .left-info {
        // width: 504px;
        width: max-content;
        .price-unit-text {
          font-size: 14px;
          color: #666;
          margin-left: 15px;
        }
        .btn-box {
          display: flex;
          margin-left: 134px;
          margin-bottom: 40px;
          .prev-btn {
            margin-right: 13px;
          }
        }
        //
        .business-license-box {
          .license-content {
            display: flex;
            height: 120px;
          }
        }
        .id-box {
          .upload-content {
            .upload-img {
              display: flex;
              div {
                &:nth-child(2) {
                  margin-left: 20px;
                }
              }
              .idcard.el-form-item {
                margin-bottom: 15px;
              }
              .idcard.el-form-item.is-error {
                margin-bottom: 45px;
              }
            }
            .upload-example {
              display: flex;
              width: 100%;
              // margin-top: 15px;
              // margin-left: 120px;
              .example-box {
                margin-left: 0;
                &:nth-child(2) {
                  margin-left: 20px;
                }
              }
            }
            // .upload-tips {
            //   margin-left: 120px;
            // }
            .idcard {
              height: 120px;
            }
          }
        }
        // 店铺简介
        .store-intro {
          width: 350px;
        }
        .img-static {
          display: block;
          width: 120px;
          height: 120px;
        }
        .img-static:not(:first-child) {
          margin-left: 20px;
        }
        .en-left {
          margin-left: 140px;
        }
        .zh-left  {
          margin-left: 140px;
        }
        // 示例框
        .example-box {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          min-width: 120px;
          height: 120px;
          background: #FFFFFF;
          border: 1px solid #EAEAEA;
          border-radius: 3px;
          box-sizing: border-box;
          margin-left: 20px;
          padding: 5px;
          img {
            display: block;
            width: auto;
            max-width: 100%;
            height: auto;
            max-height: 100%;
          }
          .tips {
            position: absolute;
            left: -1px;
            bottom: 0;
            width: 120px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: #fff;
            background: rgba(51, 51, 51, 0.5);
            text-align: center;
            border-radius: 0px 0px 3px 3px;
          }
        }

        .upload-tips {
          font-size: 12px;
          color: #999;
          line-height: 1.5em;
          margin-top: 13px;
        }

        // 图片上传框样式修改
        & >>> .el-upload {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 120px;
          height: 121px;
          background: #FFFFFF;
          border: 1px solid #EAEAEA;
          border-radius: 3px;
          box-sizing: border-box;
          // img {
          //   width: 120px;
          // }
          .el-icon-plus {
            font-size: 22px;
            color: #EAEAEA;
          }
        }
      }
      .capital-int {
        & >>> .el-input__inner {
          padding-right: 0!important;
          border-radius: 2px 0 0 2px!important;
        }
      }
      // 成立日期
      & >>> .el-date-editor.el-input,
      & >>> .el-date-editor.el-input__inner {
        width: 100%;
      }
      // 营业期限
      & >>> .el-range-editor.el-input__inner {
        width: auto;
        .el-range-separator {
          width: 8%;
        }
      }
    }
  }
  .foot-btn {
    margin: 30px 140px;
  }
  .end-time {
    position: relative;
    .text {
      position: absolute;
      left: 30px;
    }
  }
  ::v-deep .plugin-images .el-upload-list .el-upload-list__item,
  ::v-deep .plugin-images > .el-upload--picture-card {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    margin-right: 0;
  }
</style>
